<template>
	<div class="found_list">
		<div class="box"></div>
       <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide><img src="../../assets/色相-饱和度-1@2x.png"></swiper-slide>
        <swiper-slide><img src="../../assets/timg@2x.png"></swiper-slide>
        <swiper-slide><img src="../../assets/色相-饱和度-1@2x.png"></swiper-slide>
        <swiper-slide><img src="../../assets/timg@2x.png"></swiper-slide>
  
        <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <div class="comment_nav">
         	<span :class="{'active':selectSingle}" @click="SelectSingle"><router-link to="/dynPla">动态平台 </router-link></span>
			<span :class="{'active': selectAlbum}" @click="selectAlbum"><router-link to="/myFri">我的朋友 </router-link></span>
			
         </div>

		<div class="singer"> 
			<div class="singer_print">
				<div class='singer_left'><img src="../../assets/2100.png"></div>
				<div class='singer_right'>啊宽</div>
			</div>
			<div class="singer_brief">
			     <p>翻唱红人、串烧歌唱达人,翻唱红人、串烧歌唱达人</p>
			</div>
		</div>
		<div class="brief">
			<div class="brief_pc">
				<img src="../../assets/603057cb374bb6009a7cdbfc4e892ffa@2x.png">
			</div>
			<div class="brief_icon">
				<span>
					<img src="../../assets/icon-like32.png">
				</span>
				<span class="brief_icon_down"><img src="../../assets/icon-talk@2x32.png"></span>
			</div>
		</div>
		<div class="found_down">
			<div class="found_down_pc" ><img src="../../assets/2@3x.png"></div>
			<div class="found_down_brief">啊宽</div>
		</div>
		<musicPlayer></musicPlayer>
	</div>
</template>
<script>
import musicPlayer from '../../components/music_player'
	export default {
		name:'found',
		data(){
			return{
				   swiperOption: {
                      autoplay:true,
                      pagination: {
                          el: '.swiper-pagination',
                        }
                    },
                    selectSingle:true,
				    selectAlbum:false
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			SelectSingle(){
				this.selectSingle = true;
				this.selectAlbum = false;
				},
			SelectAlbum(){
				this.selectSingle = false;
				this.selectAlbum = true;
				
			}
			
		}
	}
</script>
<style scoped lang='Less'>
.found_list{
	width: 100%;
	overflow: hidden;
	background-color: #fff;
	padding-bottom: 98/100rem;
}
.swiper-slide{
	width: 100%;
	height: 350 / 100rem;
	margin-top: 88 / 100rem;
}
.swiper-slide img{
	width: 100%;
	height: 350 / 100rem;
}
.comment_nav{
	        display: flex;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			text-align: center;
}
.comment_nav span{
	        flex:1;
			padding-bottom:10 / 100rem;
			color: #333;
			border-bottom: 4 / 100rem solid #fff;
			display: block;
}
.comment_nav .active{
			color: #c995f5;
			border-bottom: 4 / 100rem solid #c995f5;
			}


.singer_print{
	width: 100%;
	height: 100 / 100rem;
}
.singer{
	width: 100%;
	height: 135 / 100rem;
	overflow: hidden;
	margin-top: 15 / 100rem;
}
.singer_brief{
    width: 660 / 100rem;
	height: 132/ 100rem;
	margin-left: 60 / 100rem;
	margin-top: 8 /100rem;
	font-size: 24 / 100rem;
}
.singer img{
	height: 100 / 100rem;
    margin-left: 20 /100rem;
}
.singer_left,.singer_right{
  float: left;
}
.singer_right{
	height: 100 / 100rem;
	line-height: 100 / 100rem;
	margin-left:26 / 100rem; 
	font-size: 24 / 100rem;
}
.brief{
	width: 100%;
	height:400 / 100rem;
	/*background-color: red;*/
	position: relative;
}

.brief_pc{
	width:710 / 100rem;
	height:345 / 100rem; 
    /*overflow: hidden;*/
    margin: 0 auto; 
    margin-top:31 / 100rem;
}
.brief_pc img{
	width: 710 / 100rem;
	height: 345 / 100rem;
}
.brief_icon{
  width: 105 / 100rem;
  height: 30 / 100rem;
  /*background-color:blue;*/
  position: absolute;
  right:34 / 100rem;
  top:360 / 100rem;
}
.brief_icon img{
  width: 30 / 100rem;
  height: 30 / 100rem;
}
.brief_icon span{
	display: inline-block;
}
.brief_icon_down{
	display: inline-block;
	margin-left: 34 /100rem;
}
.found_down{
	margin-top: 10 / 100rem;
	width: 100%;
	/*height:95 / 100rem; */
}
.found_down_brief{
	height: 95 /100rem;
	line-height: 95 /100rem;
	margin-left: 26 / 100rem;
}
.found_down_brief,.found_down_pc{
    float: left;
}
.found_down_pc{
	width: 95 / 100rem;
	height: 95 /100rem;
	margin-left: 20 / 100rem;

}
.found_down_pc img{
	width: 95 / 100rem;
	height: 95 /100rem;
}

	
</style>